<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
	<!--<meta name="viewport"content="width=device-width,inital-scale=1,nser-scalable=no" />-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
      /*屏幕宽度大于900的时候*/
*
{
    padding:0px;
    margin:0px;
    font-family:"微软雅黑";
  
}
#header
{
     font-size: large;
    border:solid 1px red;
    margin:0px auto;
}
#header ul li {display: inline-block;}

#main
{
    margin:10px auto;
    height:400px;
    
}
#footer
{
    margin:0px auto;
    height:100px;
    border:solid 1px red;
}
@media screen and (min-width:900px)
{
    #header,#footer
    {
        width:100%;
    }
    #main
    {
        width:100%;
        height:400px;;
    }
    #main-left
    {
        width:30%;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:36%;
        height:400px;
        border:solid 1px red;
        float:left;
         margin-left: 1%;
        margin-right: 2%;
    }
    #main-right
    {
        width:30%;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:396px;
        height:400px;
       
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none;
    }
}
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;;
    }
    #main-left
    {
        display:none;
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;
    }
}
</style>
</head>
<body>
  <div id="header">
  
  头部
  </div>
  <div id="main">
     <div id="main-left">内容-左边</div>
     <div id="main-center">内容-中间</div>
     <div id="main-right">内容-右边</div>
  </div>
  <div id="footer">底部</div>
</body>
</html>
